<template>
  <div>
    <!-- 卡片视图区域一 -->
    <el-card>
      <el-row :gutter="20">
        <!-- 角色名称 -->
        <el-col :span="5" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
          <el-row>
            <el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
              >角色名称：</el-col
            >
            <el-col :span="16" :xs="16" :sm="16" :md="16" :lg="16" :xl="16"
              ><el-input v-model="data.search"></el-input
            ></el-col>
          </el-row>
        </el-col>
        <!-- 权限字符-->
        <el-col :span="5" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
          <el-row>
            <el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
              >权限字符：</el-col
            >
            <el-col :span="16" :xs="16" :sm="16" :md="16" :lg="16" :xl="16"
              ><el-input
            /></el-col>
          </el-row>
        </el-col>
        <!-- 角色状态 -->
        <el-col :span="5" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
          <el-row>
            <el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
              >角色：</el-col
            >
            <el-col :span="16" :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
              <el-select v-model="select" placeholder="所有">
                <el-option label="所有" value="1"></el-option>
                <el-option label="订单号" value="2"></el-option>
                <el-option label="用户电话" value="3"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <!-- 创建时间 -->
        <el-col :span="5" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
          <el-row>
            <el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
              >创建时间：</el-col
            >
            <el-col :span="7" :xs="7" :sm="7" :md="7" :lg="7" :xl="7"
              ><el-input placeholder="开始时间"></el-input
            ></el-col>
            <el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2" :xl="2">-</el-col>
            <el-col :span="7" :xs="7" :sm="7" :md="7" :lg="7" :xl="7"
              ><el-input placeholder="结束时间"></el-input
            ></el-col>
          </el-row>
        </el-col>
        <!-- 搜索及重置按钮 -->
        <el-col :span="4" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <el-row>
            <el-col :span="8"
              ><el-button
                type="success"
                icon="el-icon-search"
                round
                size="mini"
                @click="open()"
                >搜索</el-button
              >
            </el-col>
            <el-col :span="8"
              ><el-button
                type="warning"
                icon="el-icon-share"
                round
                size="mini"
                @click="reset()"
                >重置</el-button
              ></el-col
            >
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- 卡片视图区域二 -->
    <el-card>
      <!-- 按钮 -->
      <div class="btns">
        <!-- 新增表单 -->
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          @click="dialogFormVisible = true"
          >新增</el-button
        >
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="changsha"></el-option>
                <el-option label="区域二" value="wuhan"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 修改表单 -->
        <el-button
          type="success"
          size="mini"
          icon="el-icon-edit"
          @click="dialogFormVisible = true"
          >修改</el-button
        >
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 导入表单 -->
        <el-button
          type="warning"
          size="mini"
          icon="el-icon-download"
          @click="dialogFormVisible = true"
          >导入</el-button
        >
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 导出表单 -->
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-upload2"
          @click="dialogFormVisible = true"
          >导出</el-button
        >
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="data.users"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="用户ID"> </el-table-column>
        <el-table-column prop="loginname" label="登录名称"> </el-table-column>
        <el-table-column prop="username" label="用户名称"> </el-table-column>
        <el-table-column prop="department" label="部门"> </el-table-column>
        <el-table-column prop="mobile" label="手机"> </el-table-column>
        <el-table-column prop="mg_state" label="用户状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="change(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="300px;">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="300px;">
          <template>
            <!-- 编辑按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editFormVisible = true"
              >编辑</el-button
            >
            <el-dialog
              title="收货地址"
              :visible.sync="editFormVisible"
              :append-to-body="true"
            >
              <el-form :model="editform">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="editform.names"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                  <el-select
                    v-model="editform.regions"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="长沙" value="1"></el-option>
                    <el-option label="武汉" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-share"
              size="mini"
              @click="editFormVisible = true"
              >删除</el-button
            >
            <el-dialog
              title="收货地址"
              :visible.sync="editFormVisible"
              :append-to-body="true"
            >
              <el-form :model="editform">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="editform.names"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                  <el-select
                    v-model="editform.regions"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="长沙" value="1"></el-option>
                    <el-option label="武汉" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!-- 重置按钮 -->
            <el-button
              type="success"
              icon="el-icon-delete"
              size="mini"
              @click="editFormVisible = true"
              >重置</el-button
            >
            <el-dialog
              title="收货地址"
              :visible.sync="editFormVisible"
              :append-to-body="true"
            >
              <el-form :model="editform">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="editform.names"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                  <el-select
                    v-model="editform.regions"
                    placeholder="请选择活动区域"
                  >
                    <el-option label="长沙" value="1"></el-option>
                    <el-option label="武汉" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.totalpage"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      select: '',
      data: {
        prop: '',
        totalpage: 10,
        pagenum: 4,
        search: 'admin',
        searchData: '',
        users: [
          // 假数据
          {
            id: 25,
            loginname: '刘海江',
            username: '刘海江',
            department: '科研技术室',
            mobile: '18616358651',
            mg_state: false,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          }
        ]
      },
      queryInfo: {
        pagenum: 1,
        pagesize: 2
      },
      dialogFormVisible: false,
      editFormVisible: false,
      form: {
        name: '',
        region: ''
      },
      editform: {
        names: '',
        regions: ''
      },
      formLabelWidth: '120px',
      editformLabelWidth: '120px',
      delFormVisible: false,
      multipleSelection: []
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    open() {
      this.$message('这是一条消息提示')
    },
    reset() {
      console.log('重置')
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 修改用户状态
    change(users) {
      console.log(users)
    },
    // 监听pagesize改变事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
    },
    // 监听页码值改变事件
    handleCurrentChange(newPage) {
      console.log(newPage)
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  display: inline-block;
}
.el-card:nth-child(1) {
  height: 80px;
  margin: 10px 0;
  .el-col {
    text-align: center;
    line-height: 40px;
  }
}
.btns {
  padding: 10px;
}
.el-button {
  margin: 0 5px;
}
</style>
